<template>
  <div class="complaints-container">
    <header class="header">
      <span class="breadcrumb">首页 / <span class="active-menu">违规投诉</span></span>
      <button class="complaint-button" @click="showModal = true">去投诉</button>
    </header>
    <main>
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>动态标题</th>
            <th>发布时间</th>
            <th>处理状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(complaint, index) in complaints" :key="complaint.id">
            <td>{{ index + 1 }}</td>
            <td>{{ complaint.title }}</td>
            <td>{{ complaint.creationDate }}</td>
            <td :class="{'processing': complaint.status === '正在处理中', 'completed': complaint.status === '处理完成'}">
              {{ complaint.status }}
            </td>
            <td><button class="action-button" @click="viewComplaint(complaint.id)">查看</button></td>
          </tr>
        </tbody>
      </table>
    </main>
    <!-- 投诉对话框 -->
    <div v-if="showModal" class="modal-overlay">
      <div class="modal">
        <h3>创建投诉</h3>
        <button class="close-button" @click="showModal = false">×</button>
        <form @submit.prevent="submitComplaint">
          <div class="form-group">
            <label for="title">*投诉标题</label>
            <input type="text" id="title" v-model="newComplaint.title" placeholder="请输入投诉标题" required />
          </div>
          <div class="form-group">
            <label for="content">*投诉内容</label>
            <textarea id="content" v-model="newComplaint.content" placeholder="请输入投诉内容" required></textarea>
          </div>
          <div class="form-group">
            <label for="contact">*联系人</label>
            <input type="text" id="contact" v-model="newComplaint.contact" placeholder="请输入联系人" required />
          </div>
          <div class="form-group">
            <label for="phone">*联系电话</label>
            <input type="text" id="phone" v-model="newComplaint.phone" placeholder="请输入联系电话" required />
          </div>
          <div class="form-buttons">
            <button type="button" @click="showModal = false">取消</button>
            <button type="submit">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const complaints = ref([
  { id: 1, title: '[麻城市中心] 麻城经济开发区谭家园小学建设项目招标预公告', creationDate: '2022-04-13', status: '正在处理中' },
  { id: 2, title: '[麻城市中心] 麻城市农村公路管理局招标计划', creationDate: '2022-04-13', status: '正在处理中' },
  { id: 3, title: '[麻城市中心] 麻城经济开发区谭家园小学及附属幼儿园建设项目招标预公告', creationDate: '2022-04-13', status: '正在处理中' },
  { id: 4, title: '[汉川市中心] 汉川电厂四期扩建工程电力和水管网线路迁改建设工程', creationDate: '2022-04-13', status: '正在处理中' },
  { id: 5, title: '[红安县中心] 红安县2023年度小型水库安全监测项目设计采购施工总承包(EPC)', creationDate: '2022-04-13', status: '正在处理中' },
  { id: 6, title: '海头镇宅基地发包项目', creationDate: '2022-04-13', status: '正在处理中' },
  { id: 7, title: '先锋创业大楼（515-1室）60㎡', creationDate: '2022-04-13', status: '正在处理中' },
  { id: 8, title: '万达开绿色智能铸造产业园项目（二期）比选结果公告', creationDate: '2022-04-13', status: '处理完成' },
  { id: 9, title: '2023年度工伤基金结算支付智能审核监控项目竞争性磋商公告', creationDate: '2022-04-13', status: '处理完成' },
  { id: 10, title: '万达开绿色智能铸造产业园项目（三期）比选结果公告', creationDate: '2022-04-13', status: '处理完成' },
  { id: 11, title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', creationDate: '2022-04-13', status: '处理完成' },
  { id: 12, title: '侯马市第二中学校2023年4月至11月政府采购意向-城乡义务教育补助经费中央资金', creationDate: '2022-04-13', status: '处理完成' },
  { id: 13, title: '太原市迎泽区卫生局卫生监督所2023年4月至12月政府采购意向-公用经费项目', creationDate: '2022-04-13', status: '处理完成' },
  { id: 14, title: '侯马市第二中学校2023年4月至8月政府采购意向-城乡义务教育补助经费中央资金', creationDate: '2022-04-13', status: '处理完成' },
  { id: 15, title: '[次氯酸钠贮存罐修理] 采购公告 附件', creationDate: '2022-04-13', status: '处理完成' }
]);

const showModal = ref(false);
const newComplaint = ref({
  title: '',
  content: '',
  contact: '',
  phone: ''
});

const viewComplaint = (id) => {
  // 跳转到投诉详情页
  router.push({ name: 'Wgtsxqy', params: { id } });
};

const submitComplaint = () => {
  // 这里模拟新建投诉信息，实际项目中需要发送到后端接口
  const newId = complaints.value.length + 1;
  const newComplaintData = {
    id: newId,
    title: newComplaint.value.title,
    content: newComplaint.value.content,
    contact: newComplaint.value.contact,
    phone: newComplaint.value.phone,
    creationDate: new Date().toISOString().slice(0, 10),
    status: '正在处理中'
  };
  complaints.value.push(newComplaintData);
  showModal.value = false;
  alert('提交成功');
};
</script>

<style scoped>
/* 基础样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-serif;
}

.complaints-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background-color: transparent;
  border-bottom: none;
}

.breadcrumb {
  font-size: 16px;
  color: #666;
}

.breadcrumb .active-menu {
  color: #000;
  font-weight: 500;
}

.complaint-button {
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 6px 16px;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.complaint-button:hover {
  background-color: #1d4ed8;
}

main {
  padding: 20px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  background-color: #fff;
}

th, td {
  border: none;
  padding: 12px 15px;
  text-align: left;
  vertical-align: middle;
}

th {
  background-color: #e6f7ff;
  font-weight: 600;
  color: #333;
}

tbody tr {
  border-bottom: 1px solid #e0e0e0;
}

tbody tr:hover {
  background-color: #f8fafc;
}

.processing {
  color: #f59e0b;
  font-weight: 500;
}

.completed {
  color: #10b981;
  font-weight: 500;
}

.action-button {
  background-color: #2563eb;
  color: white;
  border: none;
  padding: 4px 10px;
  cursor: pointer;
  font-size: 12px;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #1d4ed8;
}

/* 模态框样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal {
  background-color: white;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 400px;
}

.modal h3 {
  margin-bottom: 15px;
  text-align: left; /* 标题左对齐 */
}

.close-button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column; /* 表单组垂直排列 */
  align-items: flex-start; /* 表单元素左对齐 */
}

.form-group label {
  margin-bottom: 5px;
  font-weight: 600;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.form-buttons {
  display: flex;
  justify-content: flex-end;
  margin-top: 10px; /* 按钮组与表单内容有间距 */
}

.form-buttons button {
  padding: 6px 12px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.form-buttons button:first-child {
  background-color: #f4f4f4;
  margin-right: 10px;
}

.form-buttons button:last-child {
  background-color: #28a745;
  color: white;
}

/* 响应式布局 */
@media (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: flex-start;
  }
  .complaint-button {
    margin-top: 10px;
    align-self: flex-end;
  }
  th, td {
    padding: 8px 10px;
    font-size: 14px;
  }
  .modal {
    width: 90%;
  }
}
</style>